import React from 'react'
import { textColor } from '../styles/utils'

export const CloseIcon = props => (
  <svg viewBox="0 0 212.982 212.982" width={512} height={512} {...props}>
    <path
      d="M131.804 106.491l75.936-75.936c6.99-6.99 6.99-18.323 0-25.312-6.99-6.99-18.322-6.99-25.312 0L106.491 81.18 30.554 5.242c-6.99-6.99-18.322-6.99-25.312 0-6.989 6.99-6.989 18.323 0 25.312l75.937 75.936-75.937 75.937c-6.989 6.99-6.989 18.323 0 25.312 6.99 6.99 18.322 6.99 25.312 0l75.937-75.937 75.937 75.937c6.989 6.99 18.322 6.99 25.312 0 6.99-6.99 6.99-18.322 0-25.312l-75.936-75.936z"
      fill={textColor(props.palette.secondary)}
      fillRule="evenodd"
      clipRule="evenodd"
    />
  </svg>
)

export function AttachmentIcon2 (props) {
  return (
    <svg
      {...props}
      fill="currentColor"
      focusable="false"
      viewBox="0 0 24 24"
      aria-hidden="true">
      <path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z">
      </path>
    </svg>
  )
}

export const LeftIcon = props => (
  <svg viewBox="0 0 492 492" width={20} height={20} {...props}>
    <path
      d="M198.608 246.104L382.664 62.04c5.068-5.056 7.856-11.816 7.856-19.024 0-7.212-2.788-13.968-7.856-19.032l-16.128-16.12C361.476 2.792 354.712 0 347.504 0s-13.964 2.792-19.028 7.864L109.328 227.008c-5.084 5.08-7.868 11.868-7.848 19.084-.02 7.248 2.76 14.028 7.848 19.112l218.944 218.932c5.064 5.072 11.82 7.864 19.032 7.864 7.208 0 13.964-2.792 19.032-7.864l16.124-16.12c10.492-10.492 10.492-27.572 0-38.06L198.608 246.104z"
      fill={textColor(props.palette.secondary)}
    />
  </svg>
)

/*
outlined version
<svg
            xmlns="http://www.w3.org/2000/svg"
            width="55"
            height="55"
            viewBox="1 0 60 60"
          >
            <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
              <g>
                <path
                  fill="#FFF"
                  fillOpacity="0"
                  d="M0.0018 60L60 60 60 0 0.0018 0z"
                ></path>
                <path
                  stroke={`${textColor(props.palette.secondary)}`}
                  d="M11.975 27.098a8.144 8.144 0 01-1.092-2.35c-.253-.885-.341-1.796-.348-2.713-.006-.85.07-1.703.214-2.54.142-.82.344-1.661.752-2.393.21-.376.433-.734.732-1.047a5.46 5.46 0 01.924-.8c.696-.46 2.676-1.456 3.8-1.571a26.362 26.362 0 012.79-.153l2.767.016c1.844.011 3.688.021 5.533.034l5.531.038a30.646 30.646 0 00.468 0h.266c.589 0 1.18.011 1.757.117.44.08.89.192 1.287.403.115.06.226.125.332.192a60.238 60.238 0 00-1.579-.026c-.474 0-.947.01-1.418.035-.98.054-1.567.572-1.89 1.365-.504 1.237-.359 2.899-.459 4.2-.065.828-.119 3.858-.052 6.813a9.61 9.61 0 00-1.506-1.576c-2.619-2.177-6.163-2.943-9.1-2.943-1.754 0-3.29.273-4.285.682-2.132.877-4.074 2.331-5.424 4.217"
                ></path>
                <path
                  stroke={`${textColor(props.palette.secondary)}`}
                  d="M48.526 32.71c-1.058-1.269-2.618-2.058-4.228-2.44-.998-.235-2.23-.311-3.452-.311-1.988 0-3.946.202-4.808.246-.647.033-1.3.064-1.95.115-.066-.22-.138-.437-.215-.652.987-.085 1.958-.283 2.832-.769 1.423-.79 2.372-2.192 2.828-3.733.528-1.785.464-3.658.42-5.499-.041-1.651-.28-3.439-1.474-4.688a4.133 4.133 0 00-.791-.648c.607.016 1.214.035 1.816.042l5.587.075h.085c.242 0 .514-.012.8-.024.286-.012.587-.024.888-.024.789 0 1.58.083 2.113.466.816.588 1.026 1.489 1.036 2.402.018 1.523-.005 3.047-.01 4.57-.01 3.345.207 6.771-.079 10.107a3.15 3.15 0 01-.745 1.733 5.72 5.72 0 00-.653-.968z"
                ></path>
                <path d="M33.873 29.668a11.026 11.026 0 00-1.583-2.95c-.067-2.955-.013-5.985.052-6.813.1-1.301-.045-2.963.458-4.2.324-.793.912-1.311 1.89-1.365.472-.025.945-.035 1.42-.035.525 0 1.052.012 1.578.026.288.182.545.39.79.648 1.196 1.25 1.434 3.037 1.474 4.688.045 1.84.109 3.714-.42 5.499-.455 1.54-1.404 2.943-2.827 3.733-.874.486-1.845.684-2.832.77"></path>
                <path
                  stroke={`${textColor(props.palette.secondary)}`}
                  d="M44.827 46.47a.554.554 0 01-.073-.005c-1.65-.216-3.005-1.287-3.665-2.725l-.155.014c-.043 0 .227-.08-6.21-.125-1.464-.01-3.002-.251-4.298-.934a9.94 9.94 0 001.688-1.718c1.533-1.991 2.524-4.416 2.544-6.937.403.098.832.146 1.28.168.428.022.858.031 1.29.031 1.267 0 2.544-.073 3.802-.097 1.532 1.544 3.365 3.16 5.47 3.99.064.024.13.037.196.037.207 0 .398-.12.394-.344-.013-.984-.027-2.38-.04-3.363.156.037.31.054.459.054.661 0 1.242-.341 1.67-.838.2.373.355.766.46 1.17.294.984.308 2.036.231 3.052-.083 1.097-.326 2.197-.9 3.153-.557.923-1.474 1.56-2.491 1.923-.66.235-1.348.37-2.042.46.144.837.386 1.651.761 2.425.15.31-.045.608-.371.608"
                ></path>
                <path d="M46.696 38.169a.534.534 0 01-.195-.037c-2.106-.83-3.938-2.445-5.47-3.99-1.259.023-2.536.097-3.803.097-.432 0-.862-.009-1.29-.03a6.856 6.856 0 01-1.28-.17 9.681 9.681 0 00-.046-1.018 14.183 14.183 0 00-.525-2.701c.651-.051 1.304-.082 1.951-.115.862-.044 2.82-.246 4.809-.246 1.22 0 2.453.076 3.45.312 1.61.381 3.17 1.17 4.229 2.439.251.301.47.626.653.968-.428.497-1.009.839-1.67.839-.15 0-.303-.018-.46-.055.014.983.028 2.38.041 3.363.004.223-.187.344-.394.344"></path>
                <path
                  stroke={`${textColor(props.palette.secondary)}`}
                  d="M14.606 45.295c.26-.721.485-1.452.673-2.193-5.11-2.946-6.788-9.677-4.04-14.821.22-.411.466-.805.736-1.183.404.59.92 1.119 1.501 1.534.347.248.716.447 1.1.61a5.48 5.48 0 01-.96 2.525c-.197.28.026.59.339.59a.508.508 0 00.16-.026c1.01-.338 2-.827 2.76-1.535.297-.279.567-.577.79-.907.193.01.387.016.58.02.203.004.407.005.61.005.652 0 1.304-.016 1.955-.025l11.027-.147.575-.008c.017.265.035.522.056.767-.156.024-.311.05-.466.079-1.167.217-2.326.607-3.263 1.34-.92.72-1.515 1.701-1.703 2.838-.19 1.15-.023 2.353.253 3.48.264 1.077.666 2.155 1.378 3.033a5.586 5.586 0 001.759 1.424c-2.101 1.673-4.777 2.422-7.495 2.422-1.813 0-3.645-.333-5.337-.947-.166.093-.33.19-.489.294-.595.392-1.123.898-1.59 1.434a.443.443 0 01-.34.162c-.348 0-.702-.394-.569-.765z"
                ></path>
                <path d="M13.955 32.357c-.313 0-.536-.31-.34-.59a5.48 5.48 0 00.962-2.525 5.679 5.679 0 01-1.1-.61 6.233 6.233 0 01-1.502-1.534c1.35-1.886 3.292-3.34 5.424-4.217.994-.409 2.531-.682 4.285-.682 2.937 0 6.481.766 9.1 2.943a9.61 9.61 0 011.506 1.576c.024 1.049.063 2.088.122 3.016l-.575.008-11.027.147c-.651.009-1.303.025-1.955.025-.203 0-.407-.001-.61-.005-.193-.004-.387-.01-.58-.02-.223.33-.493.628-.79.907-.76.708-1.75 1.197-2.76 1.535a.508.508 0 01-.16.026"></path>
                <path
                  stroke={`${textColor(props.palette.secondary)}`}
                  d="M32.468 30.501c-.02-.245-.04-.502-.056-.767.485-.009.975-.023 1.461-.066.077.215.149.433.215.652-.543.042-1.085.099-1.62.181"
                ></path>
                <path
                  stroke={`${textColor(props.palette.secondary)}`}
                  d="M32.412 29.734a75.374 75.374 0 01-.122-3.016c.678.892 1.201 1.89 1.583 2.95-.486.043-.976.057-1.461.066"
                ></path>
                <path d="M30.426 42.695a5.586 5.586 0 01-1.759-1.424c-.712-.878-1.114-1.956-1.378-3.034-.276-1.126-.443-2.328-.253-3.48.188-1.136.784-2.118 1.703-2.837.937-.733 2.096-1.123 3.263-1.34.155-.029.31-.055.465-.079.112 1.35.278 2.35.517 2.602.474.503 1.041.782 1.674.937-.02 2.521-1.011 4.946-2.544 6.937a9.94 9.94 0 01-1.688 1.718"></path>
                <path
                  stroke={`${textColor(props.palette.secondary)}`}
                  d="M32.984 33.103c-.239-.252-.405-1.252-.517-2.602a21.921 21.921 0 011.62-.181c.263.874.435 1.782.525 2.7.034.341.048.681.046 1.02-.633-.155-1.2-.434-1.674-.937z"
                ></path>
              </g>
            </g>
          </svg>
*/

export const MessageIcon = props => {
  return <svg viewBox="0 0 60 60" {...props}>
    <path fill={textColor(props.palette.secondary)} d="M10 25.465h13a1 1 0 1 0 0-2H10a1 1 0 1 0 0 2zM36 29.465H10a1 1 0 1 0 0 2h26a1 1 0 1 0 0-2zM36 35.465H10a1 1 0 1 0 0 2h26a1 1 0 1 0 0-2z" />
    <path fill={textColor(props.palette.secondary)} d="M54.072 2.535l-34.142-.07c-3.27 0-5.93 2.66-5.93 5.93v5.124l-8.07.017c-3.27 0-5.93 2.66-5.93 5.93v21.141c0 3.27 2.66 5.929 5.93 5.929H12v10a1 1 0 0 0 1.74.673l9.704-10.675 16.626-.068c3.27 0 5.93-2.66 5.93-5.929v-.113l5.26 5.786a1.002 1.002 0 0 0 1.74-.673v-10h1.07c3.27 0 5.93-2.66 5.93-5.929V8.465a5.937 5.937 0 0 0-5.928-5.93zM44 40.536a3.934 3.934 0 0 1-3.934 3.929l-17.07.07a1 1 0 0 0-.736.327L14 53.949v-8.414a1 1 0 0 0-1-1H5.93A3.934 3.934 0 0 1 2 40.606V19.465a3.935 3.935 0 0 1 3.932-3.93L15 15.516h.002l25.068-.052a3.934 3.934 0 0 1 3.93 3.93v21.142zm14-10.93a3.934 3.934 0 0 1-3.93 3.929H52a1 1 0 0 0-1 1v8.414l-5-5.5V19.395c0-3.27-2.66-5.93-5.932-5.93L16 13.514v-5.12a3.934 3.934 0 0 1 3.928-3.93l34.141.07h.002a3.934 3.934 0 0 1 3.93 3.93v21.142z" />
  </svg>
}

export const HappinessIcon = props => (
  <svg viewBox="0 0 295.996 295.996" width={20} height={20} {...props}>
    <path fill={textColor(props.palette.secondary)} d="M147.998 0C66.392 0 0 66.392 0 147.998s66.392 147.998 147.998 147.998 147.998-66.392 147.998-147.998S229.605 0 147.998 0zm0 279.996c-36.256 0-69.143-14.696-93.022-38.44a132.713 132.713 0 0 1-23.934-32.42C21.442 190.847 16 170.047 16 147.998 16 75.214 75.214 16 147.998 16c34.523 0 65.987 13.328 89.533 35.102 12.208 11.288 22.289 24.844 29.558 39.996 8.27 17.239 12.907 36.538 12.907 56.9 0 72.784-59.214 131.998-131.998 131.998z" />
    <circle fill={textColor(props.palette.secondary)} cx={99.666} cy={114.998} r={16} />
    <circle fill={textColor(props.palette.secondary)} cx={198.666} cy={114.998} r={16} />
    <path fill={textColor(props.palette.secondary)} d="M147.715 229.995c30.954 0 60.619-15.83 77.604-42.113l-13.439-8.684c-15.597 24.135-44.126 37.604-72.693 34.308-22.262-2.567-42.849-15.393-55.072-34.308l-13.438 8.684c14.79 22.889 39.716 38.409 66.676 41.519 3.461.399 6.917.594 10.362.594z" />
  </svg>
)

export const GifIcon = props => (
  <svg width={20} height={20} {...props}>
    <path fill={textColor(props.palette.secondary)} d="M76.5 191.25v57.375c0 21.037 17.212 38.25 38.25 38.25h57.375v-76.5H114.75V229.5H153v38.25h-38.25c-11.475 0-19.125-7.65-19.125-19.125V191.25c0-11.475 7.65-19.125 19.125-19.125h57.375V153H114.75c-21.038 0-38.25 17.212-38.25 38.25zM191.25 172.125h19.125v95.625H191.25v19.125h57.375V267.75H229.5v-95.625h19.125V153H191.25z" />
    <path fill={textColor(props.palette.secondary)} d="M382.5 95.625H57.375C24.862 95.625 0 120.487 0 153v133.875c0 32.513 24.862 57.375 57.375 57.375H382.5c32.513 0 57.375-24.862 57.375-57.375V153c0-32.513-24.862-57.375-57.375-57.375zm38.25 191.25c0 21.037-17.213 38.25-38.25 38.25H57.375c-21.038 0-38.25-17.213-38.25-38.25V153c0-21.038 17.212-38.25 38.25-38.25H382.5c21.037 0 38.25 17.212 38.25 38.25v133.875z" />
    <path fill={textColor(props.palette.secondary)} d="M267.75 286.875h19.125V229.5h57.375v-19.125h-57.375v-38.25h76.5V153H267.75z" />
  </svg>
)

export const AttachmentIcon = props => (
  <svg viewBox="0 0 51.619 51.619" width={20} height={20} {...props}>
    <path fill={textColor(props.palette.secondary)} d="M50.14 19.206a.999.999 0 0 0-1.414 0L21.432 46.5a10.617 10.617 0 0 1-7.563 3.119c-2.867 0-5.553-1.107-7.564-3.119s-3.119-4.697-3.119-7.564c0-2.866 1.107-5.552 3.119-7.563L33.598 4.078c2.897-2.896 7.445-2.719 10.579.413 3.133 3.133 3.311 7.682.414 10.579l-25.64 25.641a3.685 3.685 0 0 1-5.203 0 3.684 3.684 0 0 1 0-5.203l17.369-17.369a.999.999 0 1 0-1.414-1.414L12.334 34.093a5.685 5.685 0 0 0 0 8.031 5.685 5.685 0 0 0 8.031 0l25.641-25.641c3.703-3.704 3.525-9.468-.414-13.407-3.938-3.938-9.703-4.117-13.407-.413L4.89 29.958c-2.39 2.389-3.705 5.577-3.705 8.978s1.315 6.59 3.705 8.979c2.389 2.39 5.577 3.705 8.979 3.705 3.4 0 6.589-1.315 8.978-3.705L50.14 20.62a.999.999 0 0 0 0-1.414z" />
  </svg>
)

export const PaperPlaneIcon = props => (
  <svg viewBox="0 0 60.062 60.062" width={20} height={20} {...props}>
    <path
      d="M60.046 11.196c.004-.024.011-.048.013-.072a1.054 1.054 0 0 0-.01-.224c-.002-.019.001-.037-.002-.056a1.003 1.003 0 0 0-.1-.289c-.008-.016-.019-.031-.028-.047-.002-.002-.002-.005-.003-.008-.001-.002-.004-.003-.005-.006l-.02-.033a.987.987 0 0 0-.221-.23c-.019-.014-.041-.022-.061-.035a.959.959 0 0 0-.236-.116c-.037-.012-.074-.018-.112-.025a.966.966 0 0 0-.34-.011c-.026.004-.051 0-.077.006L.798 22.046a1 1 0 0 0-.265 1.864l16.632 8.773 2.917 16.187c-.002.012.001.025 0 .037a.94.94 0 0 0 .019.354c.023.095.06.184.11.268.01.016.01.035.021.051.003.005.008.009.012.013.013.019.031.034.046.053.047.058.096.111.152.156.009.007.015.018.025.025.015.011.032.014.047.024.061.04.124.073.191.099.027.01.052.022.08.03.09.026.183.044.277.044h.003l.012-.002a.993.993 0 0 0 .763-.313l11.079-7.386 11.6 7.54a1.005 1.005 0 0 0 .86.11 1 1 0 0 0 .623-.604L59.998 11.38a.915.915 0 0 0 .033-.105c.004-.015.005-.03.008-.044l.007-.035zm-11.582 6.383L24.471 35.22c-.039.029-.07.065-.104.099-.013.012-.026.022-.037.035a1.01 1.01 0 0 0-.059.071c-.018.024-.032.049-.048.074-.037.06-.068.122-.092.188-.005.013-.013.023-.017.036-.001.004-.005.006-.006.01l-2.75 8.937-2.179-12.091 29.285-15zM22.908 46.594l2.726-9.004 4.244 2.759 1.214.789-4.124 2.749-4.06 2.707zm29.136-33.096L18.071 30.899l-14.14-7.458 48.113-9.943zm-7.485 34.006L29.154 37.492l-2.333-1.517 30.154-22.172-12.416 33.701z"
      fill={textColor(props.palette.secondary)}
      stroke="#000"
    />
  </svg>
)
